<template>
  <div>
    <el-container>
      <el-header height="200px">
        <div style="width: 1200px;margin: 10px auto">
          <img src="../assets/index/index_head_img.png" width="600" alt="">
          <div style="float: right;position:relative;top:10px">
            <div style="
                  float: right;
                  top:10px;
                  padding: 0 5px;
                  margin: 5px 0;
                  font-size: 15px;
                  ">
              <a href="/login" style="color: #E6A23C;">请登陆</a>

            </div>

            <el-input type="text" placeholder="请输入搜索的内容">
              <!--slot="append"设置搜索按钮嵌入到文本框里面-->
              <el-button slot="append" @click="search()" icon="el-icon-search"></el-button>
            </el-input>
          </div>
        </div>
        <div style="background-color: #E6A23C">
          <el-menu  router :default-active="$router.currentRoute.path" style="width: 1200px;margin: 0 auto" mode="horizontal"
                   background-color="#E6A23C" text-color="#fff"
                   active-text-color="#0f0" >
            <el-menu-item index="">首页</el-menu-item>
            <el-menu-item index="">关于我们</el-menu-item>

          </el-menu>
        </div>
      </el-header>


      <el-main style="width: 1200px;margin: 0 auto;z-index: 1;">
        <router-view/>
      </el-main>
      <el-footer>
        <div style="background-image: url('../assets/index/wave.png');height: 95px">
        </div>
        <div style="text-align: center;background-color: #3f3f3f;
          color: #b1b1b1;padding: 30px 0">
          <p>Copyright © 蜗牛有限公司版权所有 京ICP备12003709号-3 京公网安备 11010802029572号</p>
          <p>涵盖20余门课程体系，致力于打造权威的IT职业教育学习平台</p>
          <p>专注于IT职业技能培训</p>
        </div>
      </el-footer>
    </el-container>

    <el-card  v-if="adi"    style="  width: 400px;height: 300px;border-radius: 10px;position: absolute;top: 10px;opacity: 1" class="advertisement">
      <el-button type="warning" @click="adi=false" round style="margin-left: 280px">关闭</el-button>



    </el-card>
  </div>


</template>

<script>
export default {
  data: function () {
    return {
      adi:true,
      currentIndex: "1-1",
      categoryArr:[],
      bannerArr:[],
      topArr:[],
      productArr:[],
      wd:""
    }
  },
  methods:{
    closeAd(){
      this.adi=false;
    },
    search(){
      if (v.wd.trim()==""){
        v.$message.error("请输入搜索的内容!");
        return;
      }
      //和点击分类显示结果一样 复用同一个页面
      location.href="/result.html?wd="+v.wd;
    }
  },

}
</script>

<style scoped>
  .el-header img{
    vertical-align: middle;/*中间对齐*/
  }
  .el-header a{
    color: #666;
    text-decoration: none;
  }
  .el-table .el-table__cell{
    padding: 0;/*去掉自带的内边距*/
  }
  .el-table .cell{
    /*设置一行显示, 超出部分显示省略号*/
    white-space: nowrap;
  }
  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 200px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 10px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 480px;
  }

.advertisement{
  background-image: url("../assets/food/ad01.png");
  background-size: 400px 300px;
  z-index:2;
  animation-name: example;
  animation-duration: 40s;
  animation-timing-function: ease-in;
  animation-iteration-count: infinite;
}
  @keyframes example {
    0%   {background-color:red; left:0px; top:0px;}

    50% {background-color:yellow; left: 83%; top:77%;}
    100%{background-color:blue; left:0px; top:0px;}
  }

</style>